<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="AddData" :rules="rules" ref="AddData">
        <el-form-item label="一级名称">
          <el-select v-model="AddData.parentcode" placeholder="请选择">
            <el-option
              v-for="item in General1"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="AddData.name"></el-input>
        </el-form-item>
        <el-form-item label="分类编码" prop="code">
          <el-input v-model="AddData.code"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-plus"
            style="margin-left:40px"
            @click="addcomm('AddData')"
          >增加</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--搜索-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;    background: #fff;">
      <el-form :inline="true" :model="filters" ref="filters">
        <el-form-item label="分类名称">
          <el-input v-model="filters.name"></el-input>
        </el-form-item>
        <el-form-item label="分类编码">
          <el-input v-model="filters.code"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" v-on:click="getQuerys()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <Table
      :list="users"
      @handleSelectionChange="handleSelectionChange"
      :options="options"
      :columns="columns"
      :operates="operates"
    ></Table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="20"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :inline="true" :model="AddData1" :rules="rules" ref="AddData">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="AddData1.name"></el-input>
        </el-form-item>
        <el-form-item label="二级名称" prop="code">
          <el-input v-model="AddData1.code"></el-input>
        </el-form-item>
        <el-form-item label="分类编码" prop="parentcode">
          <el-input v-model="AddData1.parentcode"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import Table from "../../components/Table";
import {
  type1,
  getType,
  typepage,
  updatetype,
  typeone,
  deletetype,
} from "../../api/api";

export default {
  components: { Table },
  data() {
    return {
      columns: [
        {
          prop: "parentname",
          label: "一级名称",
          align: "center"
        },
        {
          prop: "name",
          label: "名称",
          align: "center"
        },
        {
          prop: "code",
          label: "分类编码",
          align: "center"
        }
      ],
      users: [],
      options: {
        stripe: false, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
        radioSelect: false, //是否支持列表项 单选 选中功能
        isShowProp: true,
        isShow: false
      },
      operates: {
        width: 200,
        fixed: "right",
        list: [
          {
            id: "2",
            label: "编辑",
            type: "wrang",
            show: true,
            icon: "el-icon-edit",
            plain: true,
            disabled: false,
            method: (index, row) => {
              this.handleUpdate(index, row);
            }
          },
          {
            id: "1",
            label: "删除",
            type: "danger",
            show: true,
            icon: "el-icon-delete",
            plain: true,
            disabled: false,
            method: (index, row) => {
              this.handleDel(index, row);
            }
          }
        ]
      }, // 列操作按钮
      AddData: {
        name: "",
        code: "",
        parentcode: "",
      },
      General1: [],
      rules: {
        name: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
        code: [{ required: true, message: "请填写二级分类", trigger: "blur" }],
        parentcode: [
          { required: true, message: "请填写分类编码", trigger: "blur" }
        ]
      },
      AddData1: {},
      AddData2: {},
      General1: [],
      name1: [],

      filters: {},
      total: 0,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列
      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      storFormVisible: false
    };
  },
  methods: {
    handType() {
      type1()
        .then(res => {
          let dataType = res.data.data;
          if (res.data.code === 200) {
            this.General1 = dataType;
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(error => {
          console.log(error.response);
        });
    },
    addcomm(AddData) {
      var type = this.$refs.AddData.model.types;
      this.$refs[AddData].validate(valid => {
        if (valid) {
          let data = this.AddData;
          let AddData = {
            name: data.name,
            code: data.code,
            parentcode: data.parentcode,
          };
          getType(AddData)
            .then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success"
                });
                this.AddData = { brand_right: 0 };
                this.getLists();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "error"
                });
              }
            })
            .catch(error => {
              console.log(error.response);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getLists();
    },
    //获取用户列表
    getLists() {
      let para = {
        name: this.name,
        code: this.code,
      };
      this.listLoading = true;
      typepage(para)
        .then(res => {
          this.listLoading = false;
          this.total = res.data.data.total_count;
          this.users = res.data.data.list;
        })
        .catch(error => {
          console.log(error.res.data);
        });
    },
    // 查询
    getQuerys() {
	  
      let para = {
        name: this.filters.name,
        code: this.filters.code,
	  };
	  console.log(para);
	  
      this.listLoading = true;
      typepage(para)
        .then(res => {
			console.log(res);
			
          this.listLoading = false;
          this.total = res.data.data.total_count;
          this.users = res.data.data.list;
          console.log(this.users);
        })
        .catch(error => {
          console.log("请求错误");
        });
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
		  let para = { id: row.id };
		  console.log(para);
		  
          deletetype(para).then(res => {
            console.log(res);
            this.listLoading = false;
            this.$message({
              message: res.data.msg,
              type: "success"
            });
            this.getLists();
          });
        })
        .catch(() => {});
    },
    //编辑回显
    handleUpdate: function(index, row) {
      this.listLoading = true;
      let para = { id: row.id };
      typeone(para).then(res => {
		if (res.data.code === 200) {
			this.addFormVisible = true;
			this.AddData1 = res.data.data;
		} else {
			this.$message({
				message: res.data.msg,
				type: "error"
			});
		}
      }).catch(error => {
			console.log("请求错误");
		});;
    },
    //编辑
    addSubmit(AddData) {
      this.$refs.AddData.validate(valid => {
        if (valid) {
          let data = this.AddData1;
          let para = {
            id: data.id,
            name: data.name,
			code: data.code,
			parentcode:data.parentcode
		  };
		  console.log(para);
		  
          updatetype(para).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: res.data.msg,
                type: "success"
              });
              this.getLists();
              this.addLoading = false;
              this.$refs["AddData"].resetFields();
              this.addFormVisible = false;
            } else {
              this.$message({
                message: res.data.msg,
                type: "error"
              });
            }
          });
        }
      });
    },
    // 选中行
    handleSelectionChange(val) {
      console.log("val:", val);
    }
  },
  mounted() {
    this.handType();
    this.getLists();
  }
};
</script>

<style scoped>
.el-form--inline .el-form-item {
  margin-bottom: 20px;
}
</style>